<template>
  <el-input
    placeholder="搜索音乐、MV、歌单、用户"
    class="music-header-search"
    ref="searchRef"
    v-model="searchKey"
    @focus="focusHandle"
    @input="getSmartBox"
  />
  <el-icon class="music-header-search-btn">
    <Search />
  </el-icon>
  <div class="mod_search_result drop" v-show="showDrop">
    <div class="search_result__sort" v-for="data in all" :key="data.type">
      <h4 class="search_result__tit">
        <i
          :class="{
            search_result__icon_song: data.type == 1,
            search_result__icon_singer: data.type == 2,
            search_result__icon_album: data.type == 3,
            search_result__icon_mv: data.type == 4,
          }"
        ></i
        >{{ data.name }}
      </h4>
      <ul class="">
        <li v-for="item in data.itemlist" :key="item.id">
          <router-link
            class="search_result__link"
            target="_blank"
            :to="`/songDetail/${item.mid}`"
            ><span class="search_result__name">{{ item.name }}</span
            >-<span class="search_result__singer">{{
              item.singer
            }}</span></router-link
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SearchModel',
}
</script>

<script lang="ts" setup>
import { Search, CaretBottom } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { getSmartBoxApi } from '@/api/search/searchApi'
import { SongType } from '@/api/search/searchType'

const searchRef = ref()
const showDrop = ref(false)
const searchKey = ref('')

// 定义歌曲数据
const song = ref<SongType>({
  name: '',
  itemlist: [],
})
// 定义歌手数据
const singer = ref<SongType>({
  name: '',
  itemlist: [],
})
// 定义专辑数据
const album = ref<SongType>({
  name: '',
  itemlist: [],
})
// 定义mv数据
const mv = ref<SongType>({
  name: '',
  itemlist: [],
})
// 总数居
const all = ref<SongType[]>([])
const getSmartBox = async () => {
  if (!searchKey.value) all.value = []

  const res = await getSmartBoxApi(searchKey.value)
  song.value = res.data.song
  singer.value = res.data.singer
  mv.value = res.data.mv
  album.value = res.data.album
  all.value = [song.value, singer.value, mv.value, album.value]
  console.log(all.value)
  console.log(singer.value)
  showDrop.value = true
}

window.addEventListener('mouseup', () => {
  showDrop.value = false
})
const focusHandle = () => {
  setTimeout(() => {
    showDrop.value = true
  }, 200)
}
</script>

<style scoped>
.drop {
  position: absolute;
  visibility: visible;
  max-height: 800px;
  transition: max-height 0.6s ease-out;
}
.mod_search_result {
  position: absolute;
  top: 36px;
  left: 0;
  background: #fff;
  width: 218px;
  border: 1px solid #c9c9c9;
  z-index: 9;
  text-align: left;
  font-size: 14px;
}
.search_result__sort {
  padding: 5px 0;
  border-top: 1px solid #f2f2f2;
  margin-top: -1px;
}
.search_result__link,
.search_result__tit {
  padding: 0 11px 0 41px;
  line-height: 36px;
  color: #999;
}
.search_result__tit {
  position: relative;
  font-weight: 400;
}
.search_result__tit i {
  position: absolute;
  left: 15px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url('./imgs/icon_sprite-----.png');
  background-repeat: no-repeat;
}
.search_result__icon_song {
  top: 10px;
  background-position: -20px -220px;
}
.search_result__icon_singer {
  top: 10px;
  background-position: -20px -240px;
}
.search_result__icon_album {
  top: 10px;
  background-position: -40px 0;
}
.search_result__icon_mv {
  top: 12px;
  background-position: 0 -220px;
}
.search_result__link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.music-header-search {
  width: 220px;
  height: 36px;
  outline: none;
  box-shadow: none;
}

.music-header-search-btn {
  font-size: 20px;
  position: absolute;
  font-weight: 700;
  right: 8px;
  top: 8px;
  cursor: pointer;
}

.music-header-search-btn:hover {
  color: #31c27c;
}
</style>
